<script setup lang="ts">
import useComputeForm from '@renderer/composables/useComputeForm'
import NavBar from '@renderer/components/navBar.vue'
import { ref } from 'vue'
const props = defineProps<{
  selectTemplateDialog: boolean
  openCate: string
}>()
const selectTemplateKey = ref<number>()
const emit = defineEmits<{
  (e: 'handleSaveMode', { mode }): void
  (e: 'handleCloseMode'): void
}>()
const handleSaveMode = () => {
  emit('handleSaveMode', { mode: selectTemplateKey.value })
}
const dialogOpen = async () => {
  await getCalculateExportData({
    cate: props.openCate,
  })
  selectTemplateKey.value = templateList.value![0].mode
}
const handleSelectTemplate = (id: number) => {
  selectTemplateKey.value = id
}
const handleCloseMode = () => {
  emit('handleCloseMode')
}
const { templateList, getCalculateExportData } = useComputeForm()
</script>
<template>
  <el-dialog
    v-model="props.selectTemplateDialog"
    width="1000"
    align-center
    :show-close="false"
    style="padding: 0"
    @open="dialogOpen">
    <div class="flex flex-col pb-4">
      <NavBar @handleClose="handleCloseMode" title="请选择导出模版" />
      <div class="flex flex-col px-6 pt-4 gap-10 h-[600px] overflow-y-auto">
        <div
          class="flex flex-col gap-4 p-6"
          v-for="(item, index) in templateList"
          :key="index"
          @click="handleSelectTemplate(item.mode)"
          :style="{ border: selectTemplateKey == item.mode ? '1px solid #FF9600' : '' }">
          <el-divider>
            <span class="text-xl">{{ item.name }} </span>
          </el-divider>
          <span class="text-[#888888] text-sm">说明{{ item.descr }}</span>
          <div class="flex flex-wrap gap-6">
            <el-image
              style="width: 100px; height: 100px"
              :src="imageItem.url"
              :initial-index="4"
              fit="cover"
              v-for="(imageItem, imageIndex) in item.images"
              :key="imageIndex" />
          </div>
        </div>
      </div>
      <div class="flex justify-center" @click="handleSaveMode">
        <div class="save-button">确定</div>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.save-button {
  @apply text-white px-16 py-3 rounded-md;
  background: linear-gradient(142deg, #ff9600 0%, #ffb242 100%);
}
::v-deep .el-dialog__header {
  padding-bottom: 0 !important;
}
</style>
